<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
	</head>
	<body>
		<style type="text/css">
			.a-delete {
				padding-right: 20px;
			}
		</style>
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">附件信息</h3>
			</div>
			<div class="panel-body">
				<div class="row row-my-line" id="div_idcard_contain">
					<div class="col-md-6">
						<label class="label-my-line">附件：</label>
						<span>允许文件格式：.jpg,.jpeg,.png,.bmp,.doc,.docx,.pdf,.xls,.xlsx最大5M</span>
					</div>
					<div class="col-md-6">
		 			<input id="button_file" type="file" style="float: left;"> <input id="button_upload"
							type="button" value="确认上传" onclick="" class="btn btn-primary"
							style="float: left; border-bottom: 9px; margin-top: -5px;">
					</div>
				</div>
				<div class="row row-my-line">
					<table id="contentTable" class="table table-striped table-bordered table-condensed">
						<input type="hidden" name="identifyImgBOStr" id="imgvoList_hidden">
						<thead>
							<tr>
								<th>附件</th>
								<th>附件内容</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="tbody_images">
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			(function() {
				$(document).ready(function() {

					if (option != "add" && imgList != null && imgList != "[]" && imgList != "fujian") {
						fileArray = imgList.slice(0);
						imagtable.initImageTable(fileArray, option);
					}
					$("#button_upload").bind("click", function() {
						if (imagtable.valitate() == false) {
							return;
						};
						imagtable.getData("notInit");
					});
				});
				var imgList = [];
				let maxSize = 100000;
				var option = "新增";
				var fileArray = [];
				var imagtable = {
					getData: function(source) {
						var identifyTypeDom = $("#select_identifyType"),
							identifyName = identifyTypeDom.find(" option:selected").html(),
							identifyType = identifyTypeDom.val(),
							filedata = new FormData(),
							file = $("#button_file")[0].files[0];
						if (file.size > maxSize) {
							alert("你所上传的文件过大，请重新上传");
							return;
						}
						filedata.append("file", file);
						filedata.append("identifyType", identifyType);
						filedata.append("identifyName", identifyName);
						$.ajax({
							url: "${ctx}/fileUpload/manager/uploadImg",
							data: filedata,
							processData: false,
							contentType: false,
							type: 'POST',
							success: function(data) {
								if (data.success == true) {
									imagtable.oprateAjaxData(data, source);
								} else {
									alert(data.message);
								};
							}
						});
					},
					oprateAjaxData: function(data, source) {
						$("#button_file").val(""); //reset file button
						var entity = data.entity;
						fileArray.push(entity);
						if (option != "add") {
							imagtable.initImageTable(fileArray, source);
						} else {
							var tr = $("#idcard_" + entity.identifyType),
								td1 = tr.find("td").eq(1),
								td2 = tr.find("td").eq(2);
							td1.html("");
							td2.html("").removeAttr("value");
		 				tbody = $("#tbody_images"),
								imgvoList = $("#imgvoList_hidden"),
								deleteA = $("<a href='javascript:void(0)' class='a-delete'>删除</a>"),
								downLoadA = $("<a href='javascript:void(0)'>下载</a>");


							td1.html("<a href='javascript:void(0)'>" + entity.oldFileName + "</a>").attr("value",
								entity.saveUrl);
							td1.find("a").bind("click", function() {
								initImgJbox(td1.attr("value"));
							})
							// imagtable.downLoadImg(downLoadA,td1.attr("value"));                    //下载图片

							downLoadA.attr("href", "${serverAndPort}" + entity.saveUrl);
							downLoadA.attr("download", entity.oldFileName);
							td2.append(deleteA).append(downLoadA);
							fileArray = imagtable.repeatFileDataArray(fileArray); //去重复数据
							imgvoList.val(JSON.stringify(fileArray)); //隐藏imgvoList
							var entityIndex = fileArray.length - 1;
							//利用闭包，存储当前entity在数组中的位置,提供给删除动作使用
							(function() {
								deleteA.bind("click", function() {
									fileArray.splice(entityIndex, 1);
									imgvoList.val(JSON.stringify(fileArray));
									td1.html("");
									td2.html("");
		 					});
							})(entityIndex, td2, td1, deleteA, fileArray, imgvoList);


						};
					},
					repeatFileDataArray: function(fileDataArray) {
						if (fileDataArray.length > 1) {
							var length = fileDataArray.length;
							var lastVO = fileDataArray[length - 1];
							var result = false;
							$.each(fileDataArray, function(index, item) {
								if ((index < length - 1) && (lastVO.identifyType == item.identifyType)) {
									fileDataArray[index] = lastVO;
									result = true;
								}
							});
							if (result)
								fileDataArray.pop(lastVO);
						}
						return fileDataArray;
					},
					initImageTable: function(fileDataArray, source) { //source 用于区分是初始化，还是点击上传图片，触发该函数
						var tbody = $("#tbody_images"),
							imgvoList = $("#imgvoList_hidden");
						tbody.html("");
						if (option != "detail" && (source = "notInit")) {
							fileDataArray = imagtable.repeatFileDataArray(fileDataArray);
						}
						if (option == "detail") {
							$("#div_idcard_contain").hide();
						}
						imgvoList.val(JSON.stringify(fileDataArray)); //隐藏imgvoList
						if (fileDataArray.length < 1) {
							return;
						}
						$.each(fileDataArray, function(index, item) {
							var vo = item,
								tr = $("<tr></tr>"),
								identifyNameTd = $("<td>" + vo.identifyName + "</td>"),
								fileTypeTd = $("<td><a href='javascript:void(0)'>" + vo.oldFileName +
									"</a></td>"),
								deleteA = $("<a href='javascript:void(0)' class='a-delete'>删除</a>"),
								downLoadA = $("<a href='javascript:void(0)'>下载</a>"),
								optionTd = $("<td ></td>");
							tr.attr("id", "idcard_" + vo.identifyType);
							downLoadA.attr("href", "${serverAndPort}" + vo.saveUrl);
							downLoadA.attr("download", vo.oldFileName);
							fileTypeTd.attr("value", vo.saveUrl);
							fileTypeTd.bind("click", function() {
								initImgJbox(fileTypeTd.attr("value"));
							});
							tr.append(identifyNameTd).append(fileTypeTd).append(optionTd.append(deleteA)
								.append(downLoadA));
							tbody.append(tr);
							if (option != "detail") {
		 					deleteA.bind("click", function() {
									fileDataArray.splice(index, 1);
									imagtable.initImageTable(fileDataArray);
								})
							} else {
								optionTd.find(".a-delete").remove();

							};
						});
					},
					initAddImgeTable: function() {
						var tbody = $("#tbody_images");
						$("#select_identifyType").removeAttr("name");
						$.post("${ctx}/sys/dict/listData", {
							type: "mdm_idcard"
						}, function(data) {
							$.each(data, function(index, item) {
								var vo = item,
									tr = $("<tr></tr>"),
									identifyNameTd = $("<td>" + vo.label + "</td>"),
									fileTypeTd = $("<td></td>"),
									optionTd = $("<td ><a href='javascript:void(0)'></a></td>");
								identifyNameTd.val(vo.value);
								tr.attr("id", "idcard_" + vo.value).append(identifyNameTd).append(
									fileTypeTd).append(optionTd);
								tbody.append(tr);
							});
						}, "json");
					},
					valitate: function() {
						var identifyType = $("#select_identifyType").val();

						if ((option == "edit") && $("#idcard_" + identifyType).length > 0) {
							if (!confirm("此证照已有，确认覆盖?"))
								return false;
						}
		 			if (!$("#button_file")[0].files[0]) {
							alert("请选择文件！");
							return false;
						}
						var fileType = $("#button_file")[0].value.split(".")[1].toLowerCase();
						if (fileType == "jpg" ||
		 				fileType == "png" ||
							fileType == "jpeg" ||
							fileType == "bmp" ||
							fileType == "doc" ||
							fileType == "docx" ||
							fileType == "pdf" ||
							fileType == "xls" ||
							fileType == "txt" ||
							fileType == "xlsx"
						) {
							return true;
						} else {
							alert("只支持.jpg,.jpeg,.png,.bmp,.doc,.docx,.pdf,.xls,.xlsx");
							return false;
						}
					}
				};

				function initImgJbox(imgPath) {
					var port = "${serverAndPort}";
		 		var img = $("<img>");
					img.attr("src", port + imgPath);
					top.$.jBox.open("<div><img src =" + port + imgPath + "></div>", "查看图片", 800, 550);

				}
			})(window, document)
		</script>
	</body>
</html>
